<script setup lang='ts'>
import { ESGeHistoryImagery } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { inject, onBeforeUnmount, onMounted, ref } from 'vue';
import { SceneTree } from 'xbsj-xe2/dist-node/xe2';
import RightList from "../../components/RightList.vue";
const sceneTree = inject('sceneTree') as SceneTree
const timesList = ref<string[] | undefined>([])
const timeIndex = ref(0)
let dispose: any
let sceneObject: any
const a = ref(0)
onMounted(() => {
    if (sceneTree.lastSelectedItem) {
        sceneObject = sceneTree.lastSelectedItem.sceneObject as unknown as ESGeHistoryImagery
        dispose = sceneObject.datesEvent.don((val: any) => {
            // console.log(val)
            timesList.value = val
            if (a.value === 0) {
                currentTime.value = val[0]
            }
            // currentTime.value = val[0]
            a.value++
        })
    }
    onBeforeUnmount(() => { dispose() })
})
const changeValue = (val: string, index: number) => {
    if (sceneObject) {
        sceneObject.currentDate = val
        if (timesList.value && timesList.value.length < index + 1) {
            timeIndex.value = timesList.value.length - 1
        } else {
            timeIndex.value = index
        }
    }
}
const changeLayerListShow = (item: any) => {
    if (sceneObject) {
        currentTime.value = item
        sceneObject.currentDate = item
    }
    ulIsShow.value = false
}
const currentTime = ref()

const ulIsShow = ref(false)
</script>

<template>
    <RightList :title="'可视化--谷歌影像'">
        <!-- <div class=images_relative_box>
            <label for="">时间</label>
            <div>
                <es-step-slider :timeLine="timesList" :value="timeIndex" @changeValue="changeValue" :key="timesList" />
            </div>
        </div> -->
        <div class="roam_moveOnLineMode" style="margin-left: 15px;">
            <div>
                <label for="">时间:</label><input type="text" placeholder="请选择" v-model="currentTime" readonly>
                <span class="roam_listSpan" @click="ulIsShow = !ulIsShow"><es-icon :name="'liebiao'"
                        :color="'rgba(216, 216, 216, 1)'" :size="15" /></span>
                <ul v-if="ulIsShow" class="analysis_ul" :key="a">
                    <li v-for="item in timesList" @click="changeLayerListShow(item)" :key="item">{{ item }}</li>
                </ul>
            </div>
        </div>
    </RightList>

</template>